<template>
  <div class="product-detail">
    <el-row gutter="20">
      <el-col :span="12">
        <!-- 产品图片 -->
        <img :src="product.image" alt="Product image" width="500" />
      </el-col>
      <el-col :span="12" class="product-info">
        <!-- 产品详细信息 -->
        <h2>{{ product.name }}</h2>
        <p>{{ product.description }}</p>
        <ul>
          <li v-for="(value, key) in product.specs" :key="key">{{ key }}: {{ value }}</li>
        </ul>
        <el-button type="primary" @click="addToCart">添加到购物车</el-button>
        <router-link to="/cart" class="cart-link">查看购物车</router-link>
        <el-button type="primary" @click="goToProductList" class="back-to-list">返回到产品列表</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { useCartStore } from '../stores/cartStore';
import { useRoute, useRouter } from 'vue-router';
import iPhoneImage from '../assets/iPhone16.jpg';
import oppoImage from '../assets/oppofindx8.png';
import samsungImage from '../assets/Samsung_GALAXYS_24.jpg';
import vivoImage from '../assets/vivoX200.jpg';
import nubiaImage from '../assets/nubia Z70 Ultra.jpg';
import xiaomiImage from '../assets/XIAOMI 15PRO.png';

const route = useRoute();
const router = useRouter();

// 商品数据
const products = {
  1: {
    id: 1,
    name: 'iPhone 16',
    description: '配备A18芯片和先进双摄系统，支持高效性能和卓越影像体验。',
    image: iPhoneImage,
    price: 5999,
    specs: {
      处理器: 'A18芯片',
      屏幕: '6.1英寸 OLED',
      电池: '3200mAh',
    },
  },
  2: {
    id: 2,
    name: 'OPPO Find X8',
    description: 'OPPO最新旗舰手机，配备天玑9400和高性能三摄系统。',
    image: oppoImage,
    price: 4999,
    specs: {
      屏幕: '6.7英寸 AMOLED',
      电池: '5630mAh',
      存储: '12GB + 256GB',
    },
  },
  3: {
    id: 3,
    name: 'Samsung Galaxy S24',
    description: '配备第三代骁龙8处理器和AMOLED屏幕，支持高亮度和卓越的拍摄体验。',
    image: samsungImage,
    price: 6999,
    specs: {
      屏幕: '6.2英寸 FHD+',
      电池: '4000mAh',
      存储: '8GB + 256GB',
    },
  },
  4: {
    id: 4,
    name: 'vivo X200',
    description: '联发科技天玑9400加持，超强续航与强大影像表现。',
    image: vivoImage,
    price: 4699,
    specs: {
      屏幕: '6.67英寸 AMOLED',
      电池: '5800mAh',
      存储: '12GB + 512GB',
    },
  },
  5: {
    id: 5,
    name: 'nubia Z70 Ultra',
    description: '骁龙8至尊版，强劲性能与顶级影像组合。',
    image: nubiaImage,
    price: 4799,
    specs: {
      屏幕: '6.85英寸 AMOLED',
      电池: '6150mAh',
      存储: '12GB + 256GB',
    },
  },
  6: {
    id: 6,
    name: 'XIAOMI 15PRO',
    description: '徕卡光学镜头和澎湃快充，为极致体验而生。',
    image: xiaomiImage,
    price: 4899,
    specs: {
      屏幕: '6.73英寸 AMOLED',
      电池: '6100mAh',
      存储: '16GB + 1TB',
    },
  },
};

// 当前显示的商品
const product = products[route.params.id];

// 添加到购物车功能
const cartStore = useCartStore();
const addToCart = () => {
  cartStore.addItem({
    id: product.id,
    name: product.name,
    price: product.price,
    quantity: 1,
  });
};

// 返回到产品列表
const goToProductList = () => {
  router.push('/products');
};
</script>

<style>
ul,
ol {
  list-style: none;
}

.product-detail {
  margin-top: 15px;
}

.product-info {
  color: black;
}

.product-info h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
}

.product-info p {
  font-size: 16px;
  margin-bottom: 10px;
}

.product-info ul {
  list-style: none;
  padding: 0;
}

.product-info li {
  margin-bottom: 5px;
}

.cart-link {
  display: block;
  margin-top: 15px;
  color: #409eff;
  text-decoration: none;
}

.cart-link:hover {
  text-decoration: underline;
}

.back-to-list {
  margin-top: 20px;
}
</style>
